import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class QueuerPage extends StatefulWidget {
  const QueuerPage({super.key});

  @override
  State<StatefulWidget> createState() => _QueuerPageState();
}

class _QueuerPageState extends State<QueuerPage> {
  final textFieldController = TextEditingController();
  var _comment = "";

  void setComment() {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('Leave a comment'),
            content: TextField(
              controller: textFieldController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Comment',
              ),
              maxLines: 4,
            ),
            actions: [
              TextButton(
                  onPressed: () =>
                      {Navigator.of(context, rootNavigator: true).pop()},
                  child: const Text('Cancel')),
              TextButton(
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).pop();
                    setState(() {
                      _comment = textFieldController.text;
                    });
                  },
                  child: const Text('Save'))
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Queue: 1234'),
        actions: [
          IconButton(
              onPressed: () => {setComment()},
              icon: const Icon(
                Icons.comment,
                semanticLabel: 'settings',
              ))
        ],
      ),
      body: Center(
          child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: SizedBox(
              width: double.infinity,
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      const Text('You are at:'),
                      Text('2 / 20',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 32,
                          )),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8.0, right: 8.0),
            child: SizedBox(
                width: double.infinity,
                child: Card(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      const Text('Estimated waiting time:'),
                      Text('5 minutes',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 32,
                          )),
                    ],
                  ),
                ))),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
            child: SizedBox(
                width: double.infinity,
                child: Card(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      const Text('Caller left a bulletin:'),
                      const Text(
                          'Hi, my name is Haonan Xiong, the developer of this app. Thank you for joining me.',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          )),
                    ],
                  ),
                ))),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
            child: SizedBox(
                width: double.infinity,
                child: Card(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: _comment != ""
                      ? Column(
                          children: [
                            const Text('You left a comment:'),
                            Text(_comment,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                )),
                            const Text('(Caller can see this)'),
                          ],
                        )
                      : Column(
                          children: [const Text('You left no comment.')],
                        ),
                ))),
          )
        ],
      )),
    );
  }
}
